.main_content {
  width: 100%;
  height: 100%;
  background: #f5f3ff;
  border-radius: 20rpx;
}
.content {
  width: 100%;
  height: calc(100% - 140rpx);
  padding: 40rpx 80rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.title {
  font-size: 36rpx;
  color: #0678b8;
  line-height: 50rpx;
}
.letter_container {
  flex: 1;
  width: 100%;
  padding-top: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .box_letter {
    font-size: 96rpx;
    color: #0678b8;
  }
  .box_info {
    margin-top: 32rpx;
    font-size: 32rpx;
    color: #0678b8;
  }
}
.noop {
  width: 100%;
  height: 246rpx;
}
.record {
  width: 100%;
  margin-top: 50rpx;
  margin-bottom: 50rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  .record_time {
    font-size: 28rpx;
    font-weight: bold;
    color: #00b029;
  }
}
.load {
  width: 100%;
  height: 246rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.result {
  width: 100%;
  height: 246rpx;
  padding-bottom: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .result_content {
    width: auto;
    position: relative;
    .result_content_text {
      &:nth-child(1) {
        font-size: 96rpx;
        color: #ff4848;
      }
      &:nth-child(2) {
        font-size: 36rpx;
        color: #ff4848;
      }
    }
    .result_info {
      width: 136rpx;
      height: 36rpx;
      background: #ff4848;
      border-radius: 18rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: -36rpx;
      left: 50%;
      transform: translateX(-50%);
      &.active {
        background: #57b803;
      }
      text {
        font-size: 24rpx;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }
}
.icon {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon_content {
  width: 112rpx;
  margin: 0 56rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  &.active {
    .icon_iamge {
      background: #d3ab22;
    }
  }
  .icon_iamge {
    width: 100%;
    height: 110rpx;
    background: #0e89c1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .icon_text {
    font-size: 28rpx;
    font-weight: bold;
    color: #0e89c1;
    padding-top: 16rpx;
  }
}
.button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}
.button_container {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  .button_content {
    width: 306rpx;
    height: 84rpx;
    background: #0e89c1;
    border-radius: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    &.active {
      background: #d3ab22;
    }
  }
}
.phoneme {
  width: 100%;
  height: 76rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.phoneme_title {
  width: auto;
  height: 100%;
  margin-right: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text {
    font-size: 24rpx;
    color: #0091ea;
  }
}
.phoneme_container {
  width: auto;
  height: 100%;
  margin-left: 10rpx;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  .phoneme_content {
    width: 120rpx;
    height: 100%;
    border-right: 2px dashed #0091ea;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    &:last-child {
      border-right: 0;
    }
    text {
      font-size: 24rpx;
      color: #0091ea;
      &.error {
        font-weight: 700;
        color: #ff4848;
      }
      &.correct {
        font-weight: 700;
        color: #57b803;
      }
    }
  }
}
